<style lang="less">
@import '../less/sweet-alert.less';
</style>
<template>
	<div>
		<div class="sweet-overlay" tabindex="-1" v-show="show"> </div>
		<div class="sweet-alert" tabindex="-1" :class="show ? 'showSweetAlert visible' : 'hideSweetAlert'" v-show="show">
			<div class="icon error animateErrorIcon" v-if="type == 'error'">
				<span class="x-mark animateXMark">
					<span class="line left"></span>
					<span class="line right"></span>
				</span>
			</div>
			<div class="icon warning pulseWarning" v-if="type == 'warn'">
				<span class="body pulseWarningIns"></span>
				<span class="dot pulseWarningIns"></span>
			</div>
			<div class="icon info" v-if="type == 'info'"></div>
			<div class="icon success animate" v-if="type == 'success'">
				<span class="line tip animateSuccessTip"></span>
				<span class="line long animateSuccessLong"></span>
				<div class="placeholder"></div>
				<div class="fix"></div>
			</div>
			<div class="icon custom" v-if="type == 'custom'"></div>
			<h2>{{title}}</h2>
			<p>{{msg}}</p>
			<div v-if="type == 'warn'">
				<button class="cancel" tabindex="2" @click="concel">取消</button>
				<button class="confirm danger" tabindex="1" @click="confirm">确定</button>
			</div>
			<div v-else>
				<button class="confirm" tabindex="1" @click="confirm">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    msg: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    confirmCallback: {
      type: Function,
      default: null
    },
    concelCallback: {
      type: Function,
      default: null
    },
    closeModal: {
      type: Function,
      default: null
    }
  },
  methods: {
    confirm () {
      if (this.confirmCallback) {
        this.confirmCallback()
      } else {
        this.closeModal()
        this.show = !this.show
      }
    },
    concel () {
      if (this.concelCallback) {
        this.concelCallback()
      } else {
        this.closeModal()
        this.show = !this.show
      }
    }
  }
}
</script>